<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<style type="text/css">
			body,
			html,
			#allmap {
				width: 100%;
				height: 100%;
				overflow: hidden;
				margin: 0;
				font-family: "微软雅黑";
			}
			.anchorBL{display:none;}
		</style>
		<title></title>
	</head>

	<body>

		<div id="mapcon" style="visibility: hidden;">
			<div id="allmap"></div>
		</div>
	</body>


<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/mapstyle.js"></script>
<script type="text/javascript">
	//定义全局变量
	var globolmap;
	var mapready = false;
	var currentPointArray = [];
	//百度地图API功能
	function loadJScript() {
		var script = document.createElement("script");
		script.type = "text/javascript";
		script.src = "http://api.map.baidu.com/api?v=2.0&ak=62E1eef36b2a1e58016f864a5afea444&callback=init";
		document.body.appendChild(script);
	}

	function init() {
		// 创建Map实例
		var map = new BMap.Map("allmap", {
			minZoom: 5,
			maxZoom: 16
		});
		globolmap = map;
		mapready = true;
		map.enableScrollWheelZoom(); //启用滚轮放大缩小
		map.enableContinuousZoom();//启用连续缩放效果
		map.setMapStyle({
			styleJson: mystyle
		});
		
		//载入点
		initmarkers();

		//添加右键菜单
		var menu = new BMap.ContextMenu();
		var txtMenuItem = [{
				text: '返回',
				callback: function() {
					map.setViewport(currentPointArray);
				}
			},
			{
				text: '返回',
				callback: function() {
					map.setViewport(currentPointArray);
				}
			}
		];
		for(var i = 0; i < txtMenuItem.length; i++) {
			menu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
		}
		map.addContextMenu(menu);
		setTimeout(function(){
			initmarkers()
		},5000)
	}

	function setmark(x, y, map) {
		marker = new BMap.Marker(new BMap.Point(x, y)); // 创建标注
		map.addOverlay(marker); // 将标注添加到地图中
		marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
		marker.addEventListener("click", attribute); //绑定点击事件
		return new BMap.Point(x, y);
	}

	function attribute(e) {
		var p = e.target;
		globolmap.setZoom(12);
		setTimeout(function() {
			globolmap.panTo(new BMap.Point(p.getPosition().lng, p.getPosition().lat));
		}, 200);	
	}
	function initmarkers(){
		//添加Mark点
		//alert("init markers!!");
		globolmap.clearOverlays();
		currentPointArray=[];
		//markers.push(setmark(116.404, 39.915, map));
		//markers.push(setmark(120.58333, 30.710929, map));
		//markers.push(setmark(107.330377, 35.23326, map));
		currentPointArray.push(setmark(121.539989, 31.174776, globolmap));
		currentPointArray.push(setmark(120.58333, 30.710929, globolmap));
		currentPointArray.push(setmark(120.531012, 30.822142, globolmap));
		currentPointArray.push(setmark(118.74475, 30.862822, globolmap));
		globolmap.setViewport(currentPointArray);

	}
	
	$(document).ready(function() {
		//		$("#bt").click(function() {
		//			loadJScript();
		//		});
		loadJScript();
		setTimeout(function(){
			//if(mapready)
			$("#mapcon").attr("style","visibility: visible;width: 100%;height: 100%;");
			//else
			//alert("error!");
		},5000)

	});
</script>
</html>